{% extends "base.html" %}
{% block title %}剪贴板列表{% endblock %}
{% block header %}剪贴板项列表{% endblock %}
{% block content %}

    <link rel="stylesheet" href="{{ url_for('static', filename='css/list.css') }}">
    <!-- 搜索区域 -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-stretch gap-3 mb-4">
        <form class="d-flex flex-grow-1 gap-2" action="{{ url_for('clipboard_search') }}" method="get">
            <input class="form-control py-2 px-3 rounded shadow-sm border border-gray-300 focus:outline-none focus:ring focus:ring-blue-300"
                   type="search" placeholder="搜索内容或标签" aria-label="Search" name="q">
            <button class="btn btn-primary custom-btn" type="submit">搜索</button>
            <a href="{{ url_for('clipboard_search') }}" class="btn btn-secondary custom-btn">清除</a>
        </form>

        <!-- 操作按钮组 -->
        <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                    aria-expanded="false">
                操作
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="{{ url_for('clipboard_create') }}">✏️ 新建剪贴</a></li>
                <li><a class="dropdown-item" href="{{ url_for('clipboard_import') }}">😛 导入 Excel(.xlsx)</a></li>
                <li><a class="dropdown-item" href="{{ url_for('bookmark_import') }}">😎 导入浏览器收藏夹(.html)</a></li>
                <li><a class="dropdown-item" href="{{ url_for('clipboard_export') }}">📤 导出全部 Excel(.xlsx)</a></li>
                <li><a class="dropdown-item" href="{{ url_for('clipboard_cleanup') }}">✨ 清理无标签数据</a></li>

                <li>{% if request.user_agent.platform in ['iphone', 'android', 'ipad'] or'mobile' in request.user_agent.string.lower() %}
                <a class="dropdown-item" href="{{ url_for('clipboard_send') }}">💻给电脑发送文件</a>
                {% else %}
                    <a class="dropdown-item" href="{{ url_for('clipboard_listen') }}">📂接收手机文件</a>
                {% endif %}
                </li>
            <li><a class="dropdown-item" href="https://filehelper.weixin.qq.com/">✉️微信文件传输</a></li>

            </ul>
        </div>
    </div>

    <!-- 导出表单 -->
    <form id="export-form" method="post" action="{{ url_for('export_selected') }}">
        <button type="submit" class="btn btn-primary">导出选中的记录</button>

        <!-- 表格区域 -->
        <table class="table table-hover">
            <thead class="table-light">
            <tr>
                <th>
                    <!-- 全选复选框 -->
                    <div class="form-check custom-checkbox">
                        <input class="form-check-input" type="checkbox" id="select-all">
                        <label class="form-check-label" for="select-all">全选</label>
                    </div>
                </th>
                <th>ID</th>
                <th>内容</th>
                <th>标签</th>
                <th>时间戳</th>
                <th class="text-end">操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in items %}
                <tr onclick="window.location.href='{{ url_for('clipboard_detail', id=item.id) }}'">
                    <!-- 复选框列 -->
                    <td>
                        <div class="form-check custom-checkbox">
                            <input class="form-check-input record-checkbox" type="checkbox"
                                   name="selected_items" value="{{ item.id }}"
                                   onclick="event.stopPropagation(); updateSelectedItemsInfo();">
                            <label class="form-check-label" for="item-{{ item.id }}"></label>
                        </div>
                    </td>
                    <td>{{ item.id }}</td>
                    <td class="text-truncate" style="max-width: 200px;">{{ item.content }}</td>
                    <td>{{ item.tags }}</td>
                    <td>{{ item.timestamp }}</td>
                    <td class="text-end">
                        <div class="btn-group btn-group-sm" role="group">
                            <form action="{{ url_for('clipboard_delete', id=item.id) }}" method="post"
                                  style="display:inline;">
                                <button type="submit" class="btn btn-danger custom-btn">删除</button>
                            </form>
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </form>

    <!-- 调试信息区域 -->
    <div id="debug-info" class="mt-3 p-3 bg-light border rounded">
        <strong>当前选中的记录：</strong>
        <span id="selected-items-info">无</span>
    </div>

    <!-- 分页导航 -->
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center pagination-lg">
            <!-- 上一页按钮 -->
            <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
                <a class="page-link rounded-start" href="{{ url_for('clipboard_list', page=current_page - 1) }}"
                   tabindex="-1" aria-disabled="true">
                    <i class="bi bi-chevron-left"></i> 上一页
                </a>
            </li>

            {% for num in pagination_range %}
                {% if num is none %}
                    <li class="page-item disabled"><span class="page-link">...</span></li>
                {% else %}
                    <li class="page-item {% if num == current_page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('clipboard_list', page=num) }}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            <!-- 下一页按钮 -->
            <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
                <a class="page-link rounded-end" href="{{ url_for('clipboard_list', page=current_page + 1) }}">
                    下一页 <i class="bi bi-chevron-right"></i>
                </a>
            </li>
        </ul>
    </nav>

    <!-- 添加JavaScript代码 -->
    <script>
        // 全选/取消全选功能
        document.getElementById('select-all').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.record-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateSelectedItemsInfo();
        });

        // 更新选中记录信息
        function updateSelectedItemsInfo() {
            const selectedCheckboxes = document.querySelectorAll('.record-checkbox:checked');
            const selectedIds = Array.from(selectedCheckboxes).map(cb => cb.value);

            const infoElement = document.getElementById('selected-items-info');
            if (selectedIds.length > 0) {
                infoElement.textContent = selectedIds.join(', ');
            } else {
                infoElement.textContent = '无';
            }
        }

        // 初始化页面时也检查一次选中状态
        document.addEventListener('DOMContentLoaded', updateSelectedItemsInfo);
    </script>
{% endblock %}